<template>
  <div class="main-content">
    <div class="special-playlist">
      <div class="title gradient" :style="{'letter-spacing':`${num}px`}"> 每日歌曲推荐 </div>
      <div class="subtitle">根据你的音乐口味生成 · 每天6:00更新</div>
    </div>
    <div class="track-list">
      <div>
         <SongItem v-for="(item,index) in showData" :index="index" :item="item" :key="item.id" @contextmenu.prevent="showTextMenu($event,index)"></SongItem>
      </div>
      <ul class="rightMenu" v-show="flag1" :style="`top:${topVal}px;left:${leftVal}px;`">
          <li>
            <div>
              <img :src="pictureUrl" alt="">
              <span>
                <p>{{musicName}}</p>
                <p>{{author}}</p>
              </span>
            </div>
          </li>
          <li class="menuList">
            <p>播放</p>
            <p>下一首播放</p>
          </li>
          <li class="menuList">
            <p>添加到我喜欢的音乐</p>
            <p>添加到歌单</p>
          </li>
        </ul>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line import/no-extraneous-dependencies
import store from 'storejs';
import SongItem from '../../components/SongsItem/SongItem';

export default {
  name: 'PlaymusicSongs',
  components: {
    SongItem,
  },
  data() {
    return {
      showData: [],
      flag1: false,
      topVal: 0,
      leftVal: 0,
      pictureUrl: '',
      musicName: '',
      author: '',
      num: 0,
    };
  },
  created() {
    this.num = 4;
    this.$everyRecommend({
      cookie: store.get('user').cookie,
    }).then((res) => {
      this.showData = res.data.data.dailySongs;
      // console.log(res.data.data.dailySongs);
    }).catch((err) => {
      // eslint-disable-next-line no-console
      console.log(err);
    });
  },
  methods: {
    showTextMenu(e, index) {
      // 右键菜单事件
      // 处理兼容性问题
      const oEvent = e || event;
      // 设置自定义菜单为可见
      this.flag1 = true;
      // // 获取鼠标的坐标
      const moveX = oEvent.clientX;
      const moveY = (index * 62) + 30;
      // const moveY = e.clientY;
      // // 设置盒子的top和left值
      this.leftVal = moveX - 130;
      this.topVal = moveY;
      this.pictureUrl = this.showData[index].al.picUrl;
      this.musicName = this.showData[index].name;
      this.author = this.showData[index].ar[0].name;
    },
    closeTextMenu() {
      this.flag1 = false;
    },
  },
  watch: {
    flag1(flag1) {
      if (flag1) {
        document.body.addEventListener('click', this.closeTextMenu);
      } else {
        document.body.removeEventListener('click', this.closeTextMenu);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.special-playlist {
    margin-top: 192px;
    margin-bottom: 128px;
    border-radius: 1.25em;
    text-align: center;
}
.special-playlist .title {
    font-size: 84px;
    line-height: 1.05;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing:0px;
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-name: letterSpacing4-data-v-86446086;
    animation-name: letterSpacing4-data-v-86446086;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}
.gradient {
    background: linear-gradient(
270deg
,#dd2476,#ff512f);
}
.special-playlist .subtitle {
    font-size: 18px;
    letter-spacing: 1px;
    margin: 28px 0 54px 0;
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-name: letterSpacing1-data-v-86446086;
    animation-name: letterSpacing1-data-v-86446086;
    text-transform: uppercase;
    color: var(--color-text);
}
.special-playlist {
    margin-top: 192px;
    margin-bottom: 128px;
    border-radius: 1.25em;
    text-align: center;
}
.track-list{
  position: relative;
}
.rightMenu{
  position: absolute;
  padding-left:17px;
  padding-right:16px;
  top:0px;
  left: 0px;
  height:251px;
  width:169px;
  border-radius:9px;
  box-shadow:0px 0px 8px -3px grey;
  background-color: white;
  li{
    img{
      width:39px;
      height:39px;
      border-radius:6px;
    }
    &:nth-of-type(1){
      div{
        display: flex;
        align-items: center;
        height:68px;
        border-bottom:2px solid #e8e8e8;
      span{
        margin-left:9px;
        >p:nth-of-type(1){
          font-size:15px;
          font-weight:bold;
          width: 86px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        >p:nth-of-type(2){
          font-size:12px;
          font-weight: bold;
          color:#525252;
        }
      }
      }
    }
    &:nth-of-type(2){
      padding:5px 0px;
      border-bottom:2px solid #e8e8e8;
      p{
        height:40px;
        line-height:40px;
        font-size:15px;
        font-weight: bold;
        width:153px;
        border-radius:7px;
        padding-left:15px;
        transform:translateX(-10px);
      }
    }
    &:nth-of-type(3){
      padding:5px 0px;
      p{
        padding-left:6px;
        height:40px;
        width:153px;
        line-height:40px;
        font-weight: bold;
        font-size: 15px;
        border-radius:7px;
        padding-left:15px;
        transform:translateX(-10px);
      }
    }
  }
}
.menuList p:hover{
      background-color:#eef1fe;
      color:#3a62e2;
      cursor: pointer;
}
p{
  margin-bottom:0px;
}
</style>
